<template>
	<div>
		<div style="border: 1px solid #ccc; margin-top: 10px;">
			<!-- 工具栏 -->
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
			<!-- 编辑器 -->
			<Editor style="height: 400px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="html" v-if="!showCode"
				@onChange="onChange" @onCreated="onCreated" />
		</div>
		<div style="margin-top: 10px;">
			<textarea v-model="html" style="width: 100%; height: 200px; outline: none;" v-if="showCode"></textarea>
		</div>
	</div>
</template>

<script>
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'

	export default {
		name: 'MyEditor',
		components: {
			Editor,
			Toolbar
		},
		data() {
			return {
				editor: null,
				showCode:false,
				html: '',
				toolbarConfig: {
					//toolbarKeys: ['bold', 'underline', 'italic', 'through', 'code', 'sub', 
					//'sup', 'clearStyle', 'color', 'bgColor', 'fontSize', 'fontFamily',
					 //'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify',
					  //'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink', 'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink', 'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5',  'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth', 'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang'],
					toolbarKeys: [
						'redo', 'undo','clearStyle', 'color', 'bgColor',
						'fontFamily','fontSize', 'bold', 'underline', 'italic', 'through',
					"|",'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify',
					"|",'insertImage','fullScreen']
					// excludeKeys: [ /* 隐藏哪些菜单 */ ],
				},
				editorConfig: {
					placeholder: '请输入内容...',
					// autoFocus: false,

					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {}
				}
			}
		},
		methods: {
			onCreated(editor) {
				this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
			 
			},
			onChange(editor) {
				//console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
			},
			getHtml(){
				return this.editor.getHtml()
			},
			setHtml(html){
				this.editor.setHtml(html);
			}
		},
		mounted() {

		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
		},
	}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>